<template>
<view class="page">
	<view class='nav' :style="'height:80rpx;'">
<!-- 		<view class="nav_div flex_ac flex_sb">
			<image style="width:40rpx;height:40rpx;margin-left: 30rpx;" src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/huiyuan/icon1_1.png" mode="widthFix"></image>
			<view class="flex_ac">
				<view class="" style="margin-right:20rpx">总线索数</view>
				<view class="" style="color:#FF4E25">{{sys.sysNumTotal + sys.preNumTotal + sys.artNumTotal}}条</view>
			</view>
			<view class="flex_ac">
				<view class="" style="margin-right:20rpx" >今日更新</view>
				<view class="" style="color:#FF4E25">{{sys.sysNumTodayTotal + sys.preNumTodayTotal +sys.artNumTodayTotal}}条</view>
			</view>
			<image @click="showMore" style="width:40rpx;height:40rpx;margin-right: 30rpx;" src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/my/xs_sj.png" mode=""></image>
		</view> -->
		<view class="input_view" :style="'position:absolute;bottom:20rpx;height:64rpx'">
			<view class="view" :class="active==0?'active':''" @click="active=0">智能推荐</view>
			<view class="view" :class="active==1?'active':''" @click="active=1">人工推荐</view>
			<view class="view" :class="active==2?'active':''" @click="active=2">精准推荐</view>
		</view>
	</view>
	<view class="" :style="'height:80rpx;'"></view>
	
	<view class="flex_sb" :style="'height: calc(100% - 80px);position: relative;'">
		<scroll-view class="nav-left" scroll-y style="height:100%;max-width: 90px;min-width: 90px;" scroll-with-animation>
			<view class="nav-left-item" @click="changeChain(item)" :key="index" :class="item.id==chain_id?'active_item':''"
				v-for="(item,index) in chainList">
				{{item.chain_name.length>5?item.chain_name.slice(0,5):item.chain_name}}
			</view>
		</scroll-view>
		<scroll-view  scroll-y style="height:100%;width: calc(100% - 90px)" scroll-with-animation @scrolltolower='getMore'>
			<view class="flex_sb">
				<view class="total">为您推荐<text>{{total>10000?'10000+':total}}</text>条线索</view>
				<view class="total" v-if="chain_id==''">今日 <text>{{ '+' + (active==0?sys.sysNumTodayTotal:
														active==1?sys.preNumTodayTotal:
														active==2?sys.artNumTodayTotal:0)}}</text></view>
			</view>
			<view class="box_item" v-for="(item,index) in companyList" :key='index' @click="toDetail(item)">
				<image v-if="item.logo&&!item.isErr" class="image" @error="item.isErr=true" :src="item.logo"></image>
				<view v-if="(item.isErr||!item.logo)" class="logo_name">{{ (!item.logo||item.logo.indexOf('.')>-1)? item.company_name.substring(0,4) : item.logo}}</view>
				<view class="name1">
					<view class="flex_c">
						<view class="name">{{item.company_name}}</view>
						<view class="name">{{item.score}}</view>
					</view>
					<view class="">
						<view class="chain_name" v-if="item.chain_name&&item.chain_name.length>0">{{item.chain_name[0]}}</view>
						<view class="chain_name1" v-if="item.label_name&&item.label_name.length>0">{{item.label_name[0]}}</view>
					</view>
					<view class="flex_c">
						<view class="info" style="font-size: 12px; color: #666;margin: 6px 0;">{{item.name.length>50?item.name.substr(0,50)+'...':item.name}} </view>
						<view class="" style="font-size: 12px; color: #666;margin: 6px 0;">{{item.createtime.split(' ')[0].split('-')[1]+'-'+item.createtime.split(' ')[0].split('-')[2]}}</view>
					</view>
				</view>
			</view>
			<endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='companyList.length'></endlist>
		</scroll-view>
	</view>
<!-- 	<uni-popup ref="inputDialog" type="dialog" :is-mask-click='false' mask-background-color="#000a">
		<view class="xx_div" >
			<image src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/huiyuan/kt_vip.png" mode="widthFix"></image>
			<view class="btn_vip" @click="toHy"></view>
		</view>
	</uni-popup> -->
	
	<uni-popup ref="inputDialog_sj" type="dialog">
		<view class="xx_div">
			<view class="xx_close" @click='$refs.inputDialog_sj.close()'>
				<image src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/close.png" mode=""></image>
			</view>
			<view class="sj_div">
				<view class="sj_item">
					<view class="flex_sb">
						<view class="sj_small">全部线索总数</view>
						<view class="sj_small">今日新增线索数</view>
					</view>
					<view class="h10"></view> 
					<view class="flex_sb">
						<view class="sj_left sj_left1">{{sys.sysNumTotal + sys.preNumTotal + sys.artNumTotal}}</view>
						<image class="sj_img" src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/my/login_icon_line.png" mode="widthFix"></image>
						<view class="sj_right sj_right1 flex_sb">+{{sys.sysNumTodayTotal + sys.preNumTodayTotal +sys.artNumTodayTotal}} <uni-icons type="arrow-up" size="16"></uni-icons> </view>
					</view>
				</view>
				
				<view class="sj_item">
					<view class="flex_sb">
						<view class="sj_small">智能推荐总数</view>
						<view class="sj_small">今日新增线索数</view>
					</view>
					<view class="h10"></view>
					<view class="flex_sb">
						<view class="sj_left ">{{sys.sysNumTotal}}</view>
						<image class="sj_img" src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/my/login_icon_line.png" mode="widthFix"></image>
						<view class="sj_right  flex_sb">+{{sys.sysNumTodayTotal}} <uni-icons type="arrow-up" size="16"></uni-icons> </view>
					</view>
				</view>
				
				<view class="sj_item">
					<view class="flex_sb">
						<view class="sj_small">人工推荐总数</view>
						<view class="sj_small">今日新增线索数</view>
					</view>
					<view class="h10"></view>
					<view class="flex_sb">
						<view class="sj_left">{{sys.preNumTotal}}</view>
						<image class="sj_img" src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/my/login_icon_line.png" mode="widthFix"></image>
						<view class="sj_right flex_sb">+{{sys.preNumTodayTotal}} <uni-icons type="arrow-up" size="16"></uni-icons> </view>
					</view>
				</view>
				
				<view class="sj_item">
					<view class="flex_sb">
						<view class="sj_small">精准显示总数</view>
						<view class="sj_small">今日新增线索数</view>
					</view>
					<view class="h10"></view>
					<view class="flex_sb">
						<view class="sj_left">{{sys.artNumTotal}}</view>
						<image class="sj_img" src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_new/my/login_icon_line.png" mode="widthFix"></image>
						<view class="sj_right flex_sb">+{{sys.artNumTodayTotal}} <uni-icons type="arrow-up" size="16"></uni-icons> </view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
	
	<Tabbar :current="3"></Tabbar>
	<uv-no-network></uv-no-network>
</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	import endlist from '@/components/endlist.vue'
	import {xx,chainLevel,myIndustrychain1,myIndustrychain ,GetBusinessclueList,GetMessageType,getSendSys ,GetUseInfo } from '@/utils/api.js' 
	export default {
		data() {
			return {
				page:1,
				isNewRenderDone:true,
				list:[{name:'',chain_name:[],label_name:[]}],
				active:0,
				companyList:[],
				typeList:[],
				page1:1,
				navH: uni.getStorageSync('navH'),
				navH1: uni.getStorageSync('navH1'),
				navH2: uni.getStorageSync('navH2'),
				isLoad:false,
				isfinsh:false,
				sys:{
					sysNumTodayTotal:0,
					preNumTodayTotal:0,
					artNumTodayTotal:0,
				},
				chainList:[],
				chain_id:'',
				chain_names:'',
				total:0
			}
		},
		onShow(){
			if(!uni.getStorageSync('xm_token')){
				uni.redirectTo({
					url:'/pages/login/login?type=重点招商线索推荐'
				})
				return
			}
			this.getCList()
			this.getData()
			// GetUseInfo().then(res=>{ 
			// 	let info = res.data
			// 	if(info.vip_expire_time<=0){
			// 		uni.redirectTo({
			// 			url:'/subPage/pages/xsHy/xsHy?page=xxList'
			// 		})
			// 	} 
			// })
			
			myIndustrychain1().then(res=>{
				res.data.data.unshift({chain_name:'不限',id:''})
				this.chainList = res.data.data.map(i=>{
					i.text = i.chain_name
					// i.id = i.big_chain_id||''
					i.children =null
					return i
				})
			})
		},
		components:{
			Tabbar,
			endlist
		},
		watch:{
			active:function(){
				this.companyList = []
				this.isLoad=false
				this.isfinsh=false
				this.page1 = 1
				this.getCList()
			},
			chain_id:function(){
				this.companyList = []
				this.isLoad=false
				this.isfinsh=false
				this.page1 = 1
				this.getCList()
			},
		},
		methods: {
			changeChain(e){
				// let chain_ids=[]
				// let chain_names=[]
				// e.detail.value.forEach(i=>{
				// 	chain_ids.push(i.value)
				// 	chain_names.push(i.text)
				// })
				// this.chain_ids= chain_ids.join(',')
				// this.chain_names= chain_names.join(',')
				this.chain_id = e.id
			},
			showMore(){
				this.$refs.inputDialog_sj.open()
			},
			toHy(){
				// if(!uni.getStorageSync('token')){
				// 	uni.navigateTo({
				// 		url:'/subPage/pages/login/login?type=huiyuan'
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url:'/subPage/pages/huiyuan/huiyuan'
				// 	})
				// }
			},
			getData(){
				getSendSys().then(res=>{
					if(res.status!=1){
						this.getData()
					}else{
						this.sys =res.data
					}
				})
			},
			toDetail(item){
				if(this.active==0){
					uni.navigateTo({
						url:'/pages/companyDetail/companyDetail?identification='+item.identification
					})
				}else{
					uni.navigateTo({
						url:'/pages/xxDetail/xxDetail?id='+item.id
					})
				}
			},
			getCList(){
				this.isLoad = true
				GetBusinessclueList({chain_id:this.chain_id,page:this.page1,id:uni.getStorageSync('role_id'),from:(this.active+1)}).then(res=>{
					if(this.page1==1){
						this.companyList= res.data.data
					}else{
						this.companyList.push(...res.data.data)
					}
					if(this.page>=res.data.last_page){
						this.isfinsh = true
					}
					this.total = res.data.total
					this.isNewRenderDone=true
					this.isLoad = false
				})
			},
			getMore(){
				// 加锁，避免在加载更多时用户频繁下拉导致的重复触发而渲染异常
				if(!this.isNewRenderDone||this.isfinsh) return;   
				this.isNewRenderDone = false
				// 模拟分页请求 (加载更多)
				// if(this.active==1){
				// 	this.page+=1
				// 	this.getList()
				// }else{
					this.page1 += 1
					this.getCList()
				// }
			}
		},
		onReachBottom() {
			
		},
	}
</script>

<style scoped lang="scss">
page,.page{
	height:100%;
}
.xx_l{
	width: calc(100% - 120rpx);
}
.btn_c{
	width: 100rpx;
	height: 56rpx;
	font-size: 28rpx;
	background-color: #ff9933;
	color: #fff;
	border-radius: 8rpx;
	line-height: 56rpx;
	text-align: center;
}
.item_xx{
	width: calc(100% - 56rpx);
	padding: 20rpx 28rpx;
	border-bottom: 2rpx solid #E5E5E5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	&:active{
		background-color: rgba($color: #000000, $alpha: .1);
	}
	.time{
		font-size: 24rpx;
		color: #888;
		display: flex;
		justify-content: space-between;
	}
	.red{
		color: red;
	}
	.orange{
		color: #ff9933;
	}
	.name{
		position: relative;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
	}
	.new::after{
		position: absolute;
		content:' ';
		width: 20rpx;
		font-size: 20rpx;
		top: 0rpx;
		left: -28rpx;
		border-radius: 10rpx;
		background: #red;
	}
	image{
		width: 72rpx;
		height: 72rpx;
		margin-right: 28rpx;
	}
	.title{
		font-size: 30rpx;
		width: calc(100% - 100rpx);
		position: relative;
		&::after{
			position: absolute;
			content: ' ';
			right: 0;
			top: 12rpx;
			width: 16rpx;
			height: 16rpx;
			border-top: 2rpx solid #888;
			border-right: 2rpx solid #888;
			transform: rotate(45deg);
		}
	}
}
.nav{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba($color: #fff, $alpha: 1);
	z-index: 10;
	transition: all 0.5s;
	box-shadow: 0rpx 2rpx 4rpx 4rpx rgba(191, 191, 191, 0.1);
}
.input_view{
	display: flex;
	width: calc(100% - 48rpx);
	// justify-content: center;
	padding: 0 24rpx;
	align-items: center;
	.view{
		margin-right: 50rpx;
		color: #888;
		font-size: 30rpx;
	}
	.shu{
		height:30rpx;
		width:1px;
		background:#ddd;
	}
	.active{
		font-size: 30rpx;
		font-weight: 800;
		color: #222;
		position: relative;
		&::after{
			position: absolute;
			content: ' ';
			bottom: -8rpx;
			width: 60rpx;
			height: 6rpx;
			border-radius: 3rpx;
			background-color: #EA6006;
			left: calc(50% - 30rpx);
		}
	}
}
	.box_item{
		width: calc(100% - 88rpx);
		margin: 20rpx 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 4rpx 4rpx rgba(191, 191, 191, 0.3);
		border-radius: 12rpx;
		display: flex;
		padding: 24rpx;
		position: relative;
		.image{
			width: 72rpx;
			height: 72rpx;
			margin-right: 16rpx;
		}
		.logo_name{
			height: 72rpx;
			width: 72rpx;
			margin-right: 16rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background: #FD5636;
			color: #fff;
			text-align: center;
			font-size: 26rpx;
		}
		.score1{
			position: absolute;
			right: 20rpx;
			font-size: 24rpx;
			color: #333;
		}
		.score{
			position: absolute;
			right: 32rpx;
			font-size: 44rpx;
			color: #EA6006;
			.sc{
				width: 48rpx;
				margin:0;
			}
		}
		.name1{
			width: calc(100% - 100rpx);
		}
		.name{
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 600;
			color: #333;
			line-height: 42rpx;
		}
		.info{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
		}
	}
	.flex_c{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.info{
			width: calc(100% - 80rpx);
		}
	}
	.chain_name{
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #EA6006;
		background-color: rgba($color: #EA6006, $alpha: .1);
		display: inline-block;
		margin: 16rpx 12rpx 8rpx 0;
	}
	.chain_name1{
		padding: 4rpx 8rpx;
		margin: 16rpx 12rpx 8rpx 0;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #227aff;
		display: inline-block;
		background-color: rgba($color: #227aff, $alpha: .1);
	}
	
	.nav_div{
		background: #FFFBF0;
		height:64rpx;
		width:100%;
		font-size:28rpx;
		color:#666;
	}
.xx_div{
	width: 580rpx;
	border-radius: 20rpx;
	// background: #fff;
	color: #333;
	font-size: 24rpx;
	position: relative;
	image{
		width: 100%;
	}
	.btn_vip{
		position: absolute;
		z-index:10;
		width:calc(100% - 160rpx);
		margin: 0 80rpx;
		height:100rpx;
		bottom:8%;
	}
}

.xx_close{
	position: absolute;
	right: 10rpx;
	top: 4rpx;
	width: 48rpx;
	height: 48rpx;
	image{
		width: 48rpx;
		height: 48rpx;
	}
}


.sj_div{
	width: calc(100% - 40px);
	border-radius: 20rpx;
	background: #fff;
	padding:20px;
	.sj_item{
		padding-bottom: 10rpx;
		padding-top: 20rpx;
		border-bottom: 1px solid rgba(196, 196, 196, 1);
	}
	.sj_small{
		color:rgba(74, 87, 102, 1);
		font-size:24rpx;
	}
	.sj_left{
		font-size:40rpx;
		color:rgba(87, 44, 216, 1);
		width:30%;
	}
	.sj_left1{
		color:rgba(255, 47, 0, 1);
	}
	.sj_right{
		font-size:40rpx;
		color:rgba(87, 44, 216, 1);
		width:30%;
	}
	.sj_right1{
		color:rgba(255, 47, 0, 1);
	}
	.sj_img{
		width: 70rpx;
	}
	&::v-deep .uni-icons {
		color:rgba(255, 47, 0, 1) !important;
	}
}
	
.post_r{
	width:200rpx !important;
	position: absolute;
	right:10rpx;
	&::v-deep .input-value-border {
		border:none;
	}
	&::v-deep .input-value {
		padding:0 !important;
	}
}
.nav-left {
	width: 25%;
	background: #fdfdfd;
}

.nav-left-item {
	height: 80rpx;
	border-right: solid 2rpx #f3f3f3;
	border-bottom: solid 2rpx #f3f3f3;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-left-item:last-child{
	border-bottom: none;
}
.active_item{
	font-weight: 800;
	 background-image:-webkit-linear-gradient(bottom,#FB2E20,#FD8755); 
	-webkit-background-clip:text; 
	-webkit-text-fill-color:transparent;
	position: relative;
	&::after{
		position: absolute;
		content:'';
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 32rpx;
		width: 6rpx;
		border-radius: 3rpx;
		background: linear-gradient(#FD8755,#FB2E20);
	}
}

.total{
	font-size:26rpx;
	margin: 20rpx 20rpx 0;
	text{
		color:#FF4E25
	}
}
</style>
